<template>
    <TopNavBar title="订单记录" type="back" />
  <div class="order-list-new">
    <div class="asset-info">
      <div class="asset-row">
        <span>跟投账户资产(USD)</span>
        <span>0 (USD)</span>
      </div>
      <div class="asset-row">
        <span>跟投收益(USD)</span>
        <span class="green">+0(USD)</span>
      </div>
      <div class="asset-row">
        <span>当日盈亏(USD)</span>
        <span class="green">+0(USD)</span>
      </div>
      <div class="asset-row">
        <span>可用(USD)</span>
        <span>0(USD)</span>
      </div>
      <div class="asset-row">
        <span>可提(USD)</span>
        <span>0(USD)</span>
      </div>
    </div>
    <div class="order-tabs">
      <div :class="['tab-btn', {active: tabIndex === 0}]" @click="tabIndex = 0">全部订单</div>
      <div :class="['tab-btn', {active: tabIndex === 1}]" @click="tabIndex = 1">进行中</div>
      <div :class="['tab-btn', {active: tabIndex === 2}]" @click="tabIndex = 2">已完成</div>
    </div>
    <div class="order-content">
      <template v-if="filteredOrders.length > 0">
        <div class="order-card" v-for="order in filteredOrders" :key="order.orderId">
          <div class="order-row">
            <span class="order-label">订单编号</span>
            <span class="order-id">{{ order.orderId }}</span>
            <span class="order-status" :class="{done: order.status === 'done', doing: order.status === 'doing'}">
              {{ order.status === 'done' ? '已完成' : order.status === 'doing' ? '进行中' : '' }}
            </span>
          </div>
          <div class="order-row"><span class="order-label">投资金额(USD)</span><span>{{ order.amount }}USD</span></div>
          <div class="order-row"><span class="order-label">利润</span><span>{{ order.profit }}</span></div>
          <div class="order-row"><span class="order-label">持续周期</span><span>{{ order.period }}</span></div>
          <div class="order-row"><span class="order-label">预计收益(USD)</span><span>{{ order.expectIncome }}USD</span></div>
          <div class="order-row"><span class="order-label">总利润(USD)</span><span>{{ order.totalProfit }}USD</span></div>
          <div class="order-row"><span class="order-label">购买日期</span><span>{{ order.buyDate }}</span></div>
          <div class="order-row"><span class="order-label">手续费</span><span>{{ order.fee }}USD</span></div>
          <button class="order-detail-btn" @click="goDetail(order)">详情</button>
        </div>
      </template>
      <div class="no-data" v-else>
        <img class="no-data-img" src="https://amfshe.top/assets/noData.40bd2e22.png" alt="暂无数据" />
        <div class="no-data-text">暂无数据</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
const tabIndex = ref(0)
const router = useRouter()
const orderList = ref([
  {
    orderId: '1752759666395',
    amount: 1000,
    profit: '1.5%-2%',
    period: '3天',
    expectIncome: 20,
    totalProfit: 17.78,
    buyDate: '2025-07-17 15:40:44',
    fee: 0,
    status: 'done' // 已完成
  },
  {
    orderId: '1752759666396',
    amount: 500,
    profit: '1.2%-1.8%',
    period: '5天',
    expectIncome: 10,
    totalProfit: 5.5,
    buyDate: '2025-07-18 10:20:00',
    fee: 0,
    status: 'doing' // 进行中
  }
])
const filteredOrders = computed(() => {
  if (tabIndex.value === 0) return orderList.value
  if (tabIndex.value === 1) return orderList.value.filter(o => o.status === 'doing')
  if (tabIndex.value === 2) return orderList.value.filter(o => o.status === 'done')
  return orderList.value
})
function goDetail(order) {
  router.push({ path: '/ai-follow-order-detail', query: { orderId: order.orderId } })
}
</script>

<style scoped>
.order-list-new {
  background: #fff;
  min-height: 100vh;
}
.asset-info {
  padding: 18px 0 0 0;
  margin: 0 0 12px 0;
  line-height: 2;
}
.asset-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #888;
  padding: 0 24px 6px 24px;
}
.asset-row .green {
  color: #0bb07b;
}
.order-tabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-radius: 24px;
  margin: 0 12px 0 12px;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
  overflow: hidden;
}
.tab-btn {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  font-size: 15px;
  color: #888;
  background: #fff;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.tab-btn.active {
  color: #fff;
  background: #111;
  font-weight: 700;
}
.order-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}
.order-card {
  width: 92vw;
  max-width: 370px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.06);
  padding: 22px 12px 18px 12px;
  margin: 28px 0 0 0;
}
.order-row {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #222;
  margin-bottom: 14px;
  justify-content: space-between;
}
.order-label {
  color: #bbb;
  font-size: 12px;
  margin-right: 8px;
  min-width: 80px;
  display: inline-block;
}
.order-id {
  color: #888;
  font-size: 12px;
  margin-right: 8px;
}
.order-status {
  margin-left: auto;
  font-size: 13px;
  font-weight: 500;
}
.order-status.done {
  color: #0bb07b;
}
.order-status.doing {
  color: #ff9800;
}
.order-detail-btn {
  width: 100%;
  margin-top: 18px;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  padding: 10px 0;
  cursor: pointer;
}
.no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 32px;
}
.no-data-img {
  width: 90px;
  height: 90px;
  margin-bottom: 12px;
}
.no-data-text {
  color: #888;
  font-size: 15px;
}
</style> 